<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Demo</title>
  <style>
      canvas {
          border: 1px solid #ccc;
      }
  </style>
</head>
<body>
<canvas id="my-canvas" width="400" height="400"></canvas>

<script>
  const canvas = document.getElementById('my-canvas');
  const ctx = canvas.getContext('2d');

  // 创建一个圆形对象
  const circle = {
    x: 50,
    y: 50,
    radius: 30,
    speed: 2, // 移动速度
    color: getRandomColor()
  }

  function drawCircle() {
    // 绘制圆形
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
    ctx.fillStyle = circle.color;
    ctx.fill();
  }

  function clearCanvas() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  function update() {
    // 更新圆形的位置
    circle.y += circle.speed;

    // 判断是否超出画布边界，如果是则反向移动
    if (circle.y + circle.radius > canvas.height || circle.y - circle.radius < 0) {
      circle.speed = -circle.speed;
      circle.color = getRandomColor()
    }
  }

  function animate() {
    // 清空画布
    clearCanvas();

    // 更新圆形位置
    update();

    // 绘制圆形
    drawCircle();

    // 循环调用 animate 方法
    requestAnimationFrame(animate);
  }

  // 开始动画循环
  animate();

</script>
</body>
</html>
